<template>
  <div class="my">
    <router-link to="/" class="user">
      <div class="head c-testimg"></div>
      <div class="name">我是一名作者</div>
      <div class="arrow"><i class="icon-arrow1"></i></div>
    </router-link>
    <div class="lists">
      <router-link to="/">
        <div class="icon ograne">
          <i class="icon-article"></i>
        </div>
        <div class="cont line">
          <div class="tit">我发表的</div>
          <div class="info">3篇 <i class="icon-arrow1"></i></div>
        </div>
      </router-link>
      <router-link to="/">
        <div class="icon blue">
          <i class="icon-star"></i>
        </div>
        <div class="cont">
          <div class="tit">我收藏的</div>
          <div class="info">3篇 <i class="icon-arrow1"></i></div>
        </div>
      </router-link>
      <router-link to="/">
        <div class="icon green">
          <i class="icon-comment"></i>
        </div>
        <div class="cont">
          <div class="tit">帮助与反馈</div>
          <div class="info"><i class="icon-arrow1"></i></div>
        </div>
      </router-link>
    </div>
    <my-Nav></my-Nav>
  </div>
</template>

<script>
    import myNav from '../components/nav.vue'
    export default {
        name: 'my',
        components:{
          myNav
        },
        data () {
            return {}
        }
    }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  @import "../assets/css/common.scss";
  .my{}
  .user{
    height: rem(400);display: block;padding-top: rem(80);box-sizing: border-box;position: relative;background-color: lavender;
    .head{@include img-bg-show;width: rem(148);height: rem(148);border-radius: 100%;margin: 0 auto;}
    .arrow{position: absolute;top: 0;right: rem(33);bottom: 0;line-height: rem(400);color: $black-light;}
    .name{font-size: rem(36);margin-top: rem(20);text-align: center;}
  }
  .lists{
    a{
      display: block;height: rem(100);box-sizing: border-box;clear: both;background-color: #fff;
      &:last-child{margin-top: rem(30);}
      i{vertical-align: rem(-3);}
      .icon{float: left;width: rem(54);height: rem(54);line-height: rem(54);text-align: center;border-radius: 100%;color: #fff;font-size: rem(28);margin: rem(23) rem(26) {right: 0;}
        &.ograne{background-color: #F1A884;}
        &.blue{background-color: #98A7D5;}
        &.green{background-color: #A3D497;}
      }
      .cont{
        height: 100%;margin-left: rem(80);padding-left: rem(20);line-height: rem(100);
        &.line{@include border-half-all($border,'bottom');}
        .tit{font-size: rem(32);float: left;}
        .info{float: right;font-size: rem(28);color: $black-light;padding-right: rem(26);}
      }
    }
  }
</style>
